<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>Learn Html/jQuery/Bootstrap </title>
	<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="bootstrap/css/bootstrap-theme.min.css">
</head>
<body>
	<div class="container-fluid">
		<div class="jumbotron">
			<div class="container">
				<h1>Let's learn</h1>
				<p>HTML5 / CSS3 / jQuery / Bootstrap</p>
				<p>
					<a class="btn btn-primary btn-lg">fire up!</a>
				</p>
			</div>
		</div>
		<div class="row">
			<div class="col-md-3">
				<div class="input-group">
					<input type="text" class="form-control" id="tag" placeholder="Input Tag Name Here">
					<span class="input-group-btn">
						<button type="button" class="btn btn-default">Go!</button>
					</span>
				</div>
			</div>
			<div class="col-md-9">
				<ul class="list-group"></ul>
			</div>
		</div>	
	</div>
	<script src="jQuery/jquery-1.12.1.min.js"></script>
	<script src="bootstrap/js/bootstrap.min.js"></script>
	<script>
		$(function(){
			$('.btn-default').click(function(event) {
				$('<li class="list-group-item">' + $('#tag').val() + '</li>').appendTo('.list-group').hover(function() {
					$(this).addClass('active');
				}, function() {
					$(this).removeClass('active');
				});
				$('#tag').val('');
			});

			$('#tag').keypress(function(event) {
				if(event.which == 13){
					$('.btn-default').click();
				}
			});
			console.log("jQuery Working!");
		});
	</script>
</body>
</html>